<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>活动专区</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="css/activity.css" />
		<!--App默认样式-->
		<link rel="stylesheet" href="css/default.css" />
		<!--引人jquery-->
		<script type="text/javascript" src="js/jquery-2.1.0.js" ></script>
		<script type="text/javascript" src="js/nav.js"></script>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		    <h1 class="mui-title">活动专区</h1>
		</header>
			<!--搜索框-->
		<div class="mui-input-row mui-search activityList">
		    <input type="search" class="mui-input-clear" placeholder="搜索">
		</div>
        <!--列表-->
            <ul class="mui-table-view">
    <li class="mui-table-view-cell mui-media">
        <a href="javascript:;">
            <img class="mui-media-object mui-pull-left list-img" src="image/item2.png">
            <div class="mui-media-body">
                <span class="list-supTitle">活动标题活动标题活动标题活动标题活动标题活动标题活动标题活动标题活动标题活动标题</span>
                <p class='mui-ellipsis'>活动时间：<i>2019-03-13</i></p>
                 <div class="btn-box">
                 	 <button class="jojinedBtn">已参与</button>
                 <button class="cancel">取消</button>
                 </div>
            </div>
        </a>
    </li>
    <li class="mui-table-view-cell mui-media">
        <a href="javascript:;">
            <img class="mui-media-object mui-pull-left" src="image/slider1.jpg">
            <div class="mui-media-body">
                <span class="list-supTitle">动标题活动标题</span>
                <p class='mui-ellipsis'>活动时间：<i>2019-03-13</i></p>
               <div class="btn-box">
               	  <button class="jojinedBtn">已参与</button>
                 <button class="cancel">取消</button>
               </div>
            </div>
        </a>
    </li>
    <li class="mui-table-view-cell mui-media">
        <a href="javascript:;">
            <img class="mui-media-object mui-pull-left" src="image/item1.png">
            <div class="mui-media-body">
                <span class="list-supTitle">活动标题活动标题活动标题活动标题活动标题</span>
                <p class='mui-ellipsis'>活动时间：<i>2019-03-13</i></p>
               <div class="btn-box">
               	  <!--<button class="jojinedBtn">已参与</button>-->
                 <!--<button class="cancel">取消</button>-->
                 <button class="hasEnded">已结束</button>
               </div>
            </div>
        </a>
    </li>
    <li class="mui-table-view-cell mui-media">
        <a href="javascript:;">
            <img class="mui-media-object mui-pull-left" src="image/item1.png">
            <div class="mui-media-body">
                <span class="list-supTitle">活动标题活动标题活动标题活动标题活动标题</span>
                <p class='mui-ellipsis'>活动时间：<i>2019-03-13</i></p>
               <div class="btn-box">
               	  <button class="jojinedBtn">以参与</button>
                 <button class="cancel">取消</button>
               </div>
            </div>
        </a>
    </li>
    <li class="mui-table-view-cell mui-media">
        <a href="javascript:;">
            <img class="mui-media-object mui-pull-left" src="image/item1.png">
            <div class="mui-media-body">
                <span class="list-supTitle">活动标题活动标题活动标题活动标题活动标题</span>
                <p class='mui-ellipsis'>活动时间：<i>2019-03-13</i></p>
               <div class="btn-box">
               	  <!--<button class="jojinedBtn">已参与</button>-->
                 <!--<button class="cancel">取消</button>-->
                 <button class="hasEnded">已结束</button>
               </div>
            </div>
        </a>
    </li>
    <li class="mui-table-view-cell mui-media">
        <a href="javascript:;">
            <img class="mui-media-object mui-pull-left" src="image/item1.png">
            <div class="mui-media-body">
                <span class="list-supTitle">活动标题活动标题活动标题活动标题活动标题</span>
                <p class='mui-ellipsis'>活动时间：<i>2019-03-13</i></p>
               <div class="btn-box">
               	  <button class="jojinedBtn">以参与</button>
                 <button class="cancel">取消</button>
               </div>
            </div>
        </a>
    </li>
</ul>
	<!--导航-->
 <div class="bottonNav nav-cont" id="navCont">
            	<a href="index.html" class="nav-cont-itme" >
            		<img src="icon/shouye.png" class="navImg"/>
            		<span>首页</span>
            	</a>
            	<a href="activity.html" class="nav-cont-itme mui-active" >
            		<img src="icon/huodong1.png" class="navImg"/>
            		<span>活动</span>
            	</a>
            	<a href="gameCenter.html" class="nav-cont-itme" >
            		<img src="icon/youxi.png" class="navImg"/>
            		<span>游戏</span>
            	</a>
            	<a href="shoppingMall.html" class="nav-cont-itme" >
            		<img src="icon/shangcheng.png" class="navImg"/>
            		<span>商城</span>
            	</a>
            	<a href="inforCenter.html" class="nav-cont-itme" >
            		<img src="icon/wode.png" class="navImg"/>
            		<span>我的</span>
            	</a>
            </div>            <div class="sated"></div>
		<script src="js/mui.min.js"></script>
		<script type="text/javascript">
			mui.init()
		</script>
	</body>

</html>